import { ExclamationCircleOutlined } from '@ant-design/icons';
import {
  Alert,
  AlertProps,
  Button,
  Descriptions,
  Popover,
  Space,
  Typography,
} from 'antd';
import dayjs from 'dayjs';
import React, { ReactNode } from 'react';
import { ApiError } from '../../utils/fetcher';

export type ErrorViewProps = {
  error?: Error | ApiError;
  children?: ReactNode;
  onRetry?: () => void;
} & AlertProps;

const ErrorView: React.FC<ErrorViewProps> = (props) => {
  const { error, children, onRetry, ...rest } = props;

  if (!error) {
    return <>{children}</>;
  }

  const body = (error as ApiError).body;
  const status = body?.status;
  let type: 'success' | 'info' | 'warning' | 'error' = 'error';
  if (status >= 200 && status < 400) {
    type = 'info';
  }
  if (status >= 400 && status < 500) {
    type = 'warning';
  }

  return (
    <Alert
      type={type}
      showIcon
      description={
        <Space>
          <Typography.Paragraph
            ellipsis={{
              rows: 3,
              expandable: true,
            }}
          >
            {body?.message || `未知错误`}
          </Typography.Paragraph>
          {body && body.error && (
            <Popover
              title="错误详情"
              content={
                <Descriptions
                  column={1}
                  size={'small'}
                  style={{ width: '370px' }}
                  labelStyle={{ whiteSpace: 'nowrap' }}
                >
                  <Descriptions.Item label="错误码">
                    {body.status}
                  </Descriptions.Item>
                  <Descriptions.Item label="错误">
                    {body.error}
                  </Descriptions.Item>
                  <Descriptions.Item label="错误信息">
                    <Typography.Paragraph
                      style={{
                        width: '300px',
                        marginBottom: 0,
                      }}
                      ellipsis={{
                        rows: 1,
                        expandable: true,
                      }}
                    >
                      {body.message}
                    </Typography.Paragraph>
                  </Descriptions.Item>
                  <Descriptions.Item label="接口地址">
                    {body.path}
                  </Descriptions.Item>
                  <Descriptions.Item label="请求ID">
                    {body.requestId}
                  </Descriptions.Item>
                  <Descriptions.Item label="请求时间">
                    {dayjs(body.timestamp).format('YYYY-MM-DD HH:mm:ss.SSS')}
                  </Descriptions.Item>
                </Descriptions>
              }
            >
              <ExclamationCircleOutlined />
            </Popover>
          )}
        </Space>
      }
      {...rest}
      action={
        <Button
          type="primary"
          size="small"
          danger
          onClick={() => (onRetry ? onRetry() : window.location.reload())}
        >
          {onRetry ? '重试' : '刷新页面'}
        </Button>
      }
    />
  );
};

export default ErrorView;
